<template>
  <div class="tabbar box">
    <div class="tabbar-item" @click="linkTo(item.path)"  :class="{active:item.path == activePath||activeIndex == index}" v-for="(item,index) in tabbarItem" :key="index">
      <img :src="(item.path == activePath||activeIndex == index)?item.selectedSrc:item.normalSrc"/>
      <div class="tabbar-title">{{item.name}}</div>
    </div>
  </div>
</template>

<script>
const nomHomeIcon = require('../../images/home-normal.png');
const selHomeIcon = require('../../images/home-selected.png');
const nomSortsIcon = require('../../images/sorts-normal.png');
const selSortsIcon = require('../../images/sorts-selected.png');
const nomQrcodeIcon = require('../../images/qrCode-normal1.png');
const selQrcodeIcon = require('../../images/qrCode-selected.png');
const nomCartsIcon = require('../../images/carts-normal.png');
const selCartsIcon = require('../../images/carts-selected.png');
const nomMeIcon = require('../../images/me-normal.png');
const selMeIcon = require('../../images/me-selected.png');
const jihuo = require('../../images/jihuo.png');
const jihuo1 = require('../../images/jihuo1.png');
export default {
  name:'subbar',
  data(){
    return{
      tabbarItem:[
        {name:'首页',path:'/',normalSrc:nomHomeIcon,selectedSrc:selHomeIcon},
        {name:'分类',path:'/categora',normalSrc:nomSortsIcon,selectedSrc:selSortsIcon},
        {name:'激活专区',path:'/searchResult?type=rmb',normalSrc:jihuo,selectedSrc:jihuo1},
        {name:'购物车',path:'/carts',normalSrc:nomCartsIcon,selectedSrc:selCartsIcon},
        {name:'我的',path:'/my',normalSrc:nomMeIcon,selectedSrc:selMeIcon},
      ],
      activePath:''
    }
    
  },
  props: {
    activeIndex: {
      default: null
    }
  },
   mounted() {
     console.log(this.$router.currentRoute)
      this.activePath = this.$router.currentRoute.fullPath
  },
  methods: {
      linkTo(link){
         this.$router.push(link)
      }
  }
}
</script>

<style lang="less">
  .tabbar{
    z-index:999;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:.99rem;
    background:#FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    .tabbar-item{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img{
        width:.39rem;
        height:.39rem;
        background-size:100%;
        vertical-align: middle;
        // box-shadow:0px 4px 7px 0px rgba(255,43,95,0.66);
      }
      .tabbar-title{
      font-size:.2rem;
      font-family:PingFang-SC-Light;
      font-weight:300;
      color:#C9D2D2;
      text-align: center;
      
      } 
       &.active{
      .tabbar-title{
          color: #FF7268;
        }
   
   
      }
    }
  }
</style>
